<template>
  <div class="home">
    <v-header :seller='seller'></v-header>
    <div class="tab">
      <router-link class="tab-item" to="/good">商品</router-link>
      <router-link class="tab-item" to="/rating">评价</router-link>
      <router-link class="tab-item" to="/seller">商家</router-link>
    </div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/header.vue'

export default {
  name: 'home',
  data () {
    return {
      seller:{},
      ratings:{},
      goods:[]
    }
  },
  components: {
    'v-header':Header
  },
  created () {
    this.$http.get('/api/sellers').then((response) => {
      this.seller = response.data
    })
    this.$http.get('/api/goods').then((response) => {
      this.goods = response.data
    })
    this.$http.get('/api/ratings').then((response) => {
      this.ratings = response.data
    })
  },
}
</script>

<style lang="stylus" scoped>
 @import '../common/stylus/index.styl'
  .home
    .tab
      display flex
      width 100%
      height 40px
      align-items center
      borderbotton(rgba(7,17,27,0.1))
      .tab-item
        flex 1
        text-align center
        font-size 14px
        line-height 14px
        color rgb(77,85,93)
        &.active
          color rgb(240,20,20)
</style>

